<template>
  <el-card class="goodsDetails" shadow="hover">
    <h2>
      <svg-icon icon-class="logo" style="font-size: 28px;" />{{"\xa0\xa0"}}商品详情
    </h2>
    <el-row>
      <!-- 封面 -->
      <el-col :span="10">
        <el-carousel height="250px">
          <el-carousel-item>
            <h3 class="medium"><img :src="group.groupCover" width="100%"></h3>
          </el-carousel-item>
          <el-carousel-item v-for="cover in Covers" :key="cover.index">
            <h3 class="medium"><img :src="cover" width="100%"></h3>
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col :span="1">
        {{"\xa0\xa0"}}
      </el-col>
      <el-col :span="13">
        <font style="font-size:20px">{{group.groupName}}</font>
      </el-col>

      <!-- 最低价格 -->
      <el-col :span="1">
        {{"\xa0\xa0"}}
      </el-col>
      <el-col :span="13">
        <br>
        <div class="price">
          <div style="margin-top:10px;margin-left:10px">
            {{"\xa0\xa0"}}
            <font style="color:orange;"><b>￥</b></font>
            <font style="color:orange;font-size:35px"><b>{{group.lowestPrice}}</b></font>
            {{"\xa0"}}<font style="color:orange;">起</font>{{"\xa0"}}{{"\xa0"}}
            <font style="color:orange;font-size:10px">价格说明</font>
          </div>
        </div>
      </el-col>
      <el-col :span="1">
        {{"\xa0\xa0"}}
      </el-col>
      <el-col :span="13">
        <br>
        <font style="color:darkgray;font-size:13px">预定须知{{"\xa0\xa0\xa0\xa0"}}{{hitn}}</font>
      </el-col>

      <!-- 选择出发地  -->
      <el-col :span="1">
        {{"\xa0\xa0"}}
      </el-col>
      <el-col :span="13">
        <br>
        选择出发地{{"\xa0\xa0"}}
        <el-select v-model="group.groupDeparture" style="margin-top:20px;width:200px">
          <el-option label="昆明" value="昆明"></el-option>
          <el-option label="成都" value="成都"></el-option>
          <el-option label="上海" value="上海"></el-option>
        </el-select>
      </el-col>
      <el-col :span="10">
        <el-calendar v-model="dateTime">
          <template slot="dateCell" slot-scope="{date, data}">
            {{ data.day.split('-').slice(2).join('-') }}
            <div v-for="travel in group.dailyStockList" :key="travel.index">
              <div v-if="data.day ==  travel.dailyStockDate">
                <el-tooltip class="item" effect="dark" :content='"库存："+travel.dailyStockQuantity' placement="right">
                  <div class="is-selected">￥{{travel.price}}</div>
                </el-tooltip>
              </div>
            </div>
          </template>
        </el-calendar>
      </el-col>

      <!-- 套餐 -->
      <el-col :span="1">
        {{"\xa0\xa0"}}
      </el-col>
      <el-col :span="13">
        <br>
        套餐{{"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0"}}
        <el-radio-group v-model="groupComboId" >
          <el-radio @change="handleChange(num)" v-for="combo in group.comboList " :key="combo.index" :label="combo.comboId">{{combo.comboName}}</el-radio>
        </el-radio-group>
      </el-col>

      <!-- 选择人数 -->
      <el-col :span="1">
        {{"\xa0\xa0"}}
      </el-col>
      <el-col :span="13" style="margin-top:20px">
        数量选择{{"\xa0\xa0\xa0\xa0\xa0\xa0"}}
        <font style="font-size:15px">总出行人数：</font>
        <el-input-number v-model="num" size="mini" style="width:80px" :min="0" controls-position="right"
          @change="handleChange(num)">
        </el-input-number>
      </el-col>

      <!-- 显示价格 -->
      <el-col :span="1">
        {{"\xa0\xa0"}}
      </el-col>
      <el-col :span="13">
        <br><br><br>
        <div>
          <div class="price1">
            <div style="margin-top:10px;margin-left:10px">
              {{"\xa0\xa0"}}
              <font style="color:orange;"><b>￥</b></font>
              <font style="color:orange;font-size:35px" ><b>{{price}}</b></font>
              {{"\xa0"}}<font style="color:orange;"></font>{{"\xa0"}}{{"\xa0"}}
              <font style="color:orange;font-size:10px">价格说明</font>
            </div>
          </div>
          
          <div class="order">
            <el-button type="warning" plain style="height: 50px;" @click="next">立即购买</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row>评论</el-row>
    <el-row>
      <pcomment :uid="myId" :pid="group.groupId"></pcomment>
    </el-row>
  </el-card>

</template>



<script>
  import {
    findById, login
  } from "@/api/user";
  import {buyGroup} from "@/api/order";

  import pcomment from "@/views/comment/productcomment/index.vue"


  export default {
    components:{
      pcomment,
    },
    data() {
      return {
        userId:'',
        orderId:0,
        myId:this.$store.getters.userId,
        num: '',
        price: '-------',
        dateTime: "",
        groupComboName: "",
        groupComboId:'',
        hitn: '支付完成后商家最晚会在9个工作小时内（工作日9:00-18:00）确认是否预定成功',
        Covers: [
          "http://sales.mafengwo.net/img/a7/d2/06f2db741b71f7cdf40f48f1334d6e69.jpeg?imageMogr2%2Fthumbnail%2F%21440x260r%2Fgravity%2FCenter%2Fcrop%2F%21440x260%2Fquality%2F100",
          "http://sales.mafengwo.net/mfs/s17/M00/2E/9D/CoUBXmATr-eALvehAAdgLXyxv0s70.jpeg?imageMogr2%2Fthumbnail%2F%21440x260r%2Fgravity%2FCenter%2Fcrop%2F%21440x260%2Fquality%2F100",
          "http://sales.mafengwo.net/img/f4/1c/1e74ffbf11e5a976d6361474aa09a0a7.jpeg?imageMogr2%2Fthumbnail%2F%21440x260r%2Fgravity%2FCenter%2Fcrop%2F%21440x260%2Fquality%2F100"
        ],
        group: {
          groupId: 73,
          groupName: "【纯玩不进店·陆地头等舱】青海甘肃西北大环线8天7晚（升级张掖豪华酒店+青海湖+茶卡盐湖+翡翠湖+水上雅丹+U型公路+莫高窟+丹霞+鸣沙山）",
          groupSold: '',
          groupScore: '',
          groupIntroduce: '',
          lowestPrice: 2500,
          groupCover: 'http://sales.mafengwo.net/mfs/s16/M00/88/2C/CoUBUmAOVPWAHozPAAelYI2lzCg05.jpeg?imageMogr2%2Fthumbnail%2F%21440x260r%2Fgravity%2FCenter%2Fcrop%2F%21440x260%2Fquality%2F100',
          groupSold: 2000,
          groupScore: 5,
          groupFavorites: 250000,
          groupFeeExplanation: null,
          groupDestineNotice: null,
          groupPurchaseNotice: null,
          groupDeparture: null,
          comboList: [{
            comboId: 1,
            comboName: "飞机往返-精品小团",
            groupId: 70,
          }, {
            comboId: 2,
            comboName: "高铁往返-精品小团",
            groupId: 71,
          }],
          bussinessUser: null,
          dailyStockList: [{
              dailyStockDate: "2022-02-27",
              price: 2800,
              dailyStockQuantity: "50",
              comboId: 1
            },
            {
              dailyStockDate: "2022-02-28",
              price: 2800,
              dailyStockQuantity: "50",
              comboId: 1
            },
            {
              dailyStockDate: "2022-02-27",
              price: 2500,
              dailyStockQuantity: "50",
              comboId: 2
            },
            {
              dailyStockDate: "2022-02-28",
              price: 2500,
              dailyStockQuantity: "50",
              comboId: 2
            },

          ]
        },
        lgTourGroup:{
          groupId:'',
          userId:'',
          groupComboName:'',
          dateTime:'',
          price:''
        }
      };
    },

    

    created() {
      this.userId = this.$store.getters.userId;
    },

    methods: {
      next(){
        this.lgTourGroup.groupId = this.group.groupId;
        this.lgTourGroup.userId = this.userId;
        this.lgTourGroup.groupComboName = this.groupComboName;
        this.lgTourGroup.dateTime = this.dateTime;
        this.lgTourGroup.price = this.price;
        buyGroup(this.lgTourGroup).then(res =>{
          console.log(res);
          this.orderId = res.data;
          // console.log(this.orderId)
          this.$router.push({
          name:'OrderProcess1',
          query:{
            groupId: this.group.groupId,
            orderId: this.orderId,
            price: this.price
          }
        })
        });
        
      },
      handleChange(num) {
        this.group.dailyStockList.forEach(ds => {
          console.log(ds.comboId);
          console.log(this.groupComboId);
          var time = this.formatDate(this.dateTime)
          if (ds.comboId == this.groupComboId &&
            ds.dailyStockDate == time) {
            this.price = ds.price * num
          }
        })
        
      },

      /* 时间格式转换 */
      formatDate(date) {
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      if(month<10){
          month = "0" + month
      }
      var day = date.getDate();
      if(day<10){
          day = "0" + day
      }
      return year + "-" + month + "-" + day;  //返回2021-11-25  (年月日)
    },


    },
  };


</script>

<style scoped>
  * {
    font-family: "微软雅黑 Light";
  }

  .price {
    margin-top: 3px;
    width: 100%;
    height: 50px;
    background: rgb(232, 235, 241);
  }

  .price1 {
    margin-top: 3px;
    width: 80%;
    height: 50px;
    background: rgb(232, 235, 241);
    float: left;
  }

  .order {
    margin-top: 3px;
    float: left;

  }

  .goodsDetails {
    width: 80%;
    border: solid rgb(174, 236, 221) 1px;
    border-radius: 4px;
    /* height: 15em; */
    margin-top: 40px;
    margin-left: 100px;
  }

  el-input {
    width: 200px;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .is-selected {
    color: #F8A535;
    font-size: 10px;
    margin-top: 20px;

  }

</style>

<style>
  .el-calendar-table .el-calendar-day {
    width: 60px;
    height: 50px;
    font-size: 4px;
    line-height: 0.1px;
    text-align: center;
  }

</style>
